<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Weba Novare</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <script type="text/javascript" src="client/js/lib/jquery-1.7.1.min.js"/>
        <script type="text/javascript" src="client/js/gui/popup.js"/>
        <script type="text/javascript" src="client/js/gui/popupLogin.js"/>
    </h:head>
    <h:body>
        <ui:include src="/template/header.xhtml" />
        <div class="mainContent">
            <div id="resultContainer">
            <div id="result" align="center">
                <br />

                <c:choose>
                    <c:when test="#{auth.loggedInAs == board.winner}">
                        <h1>YOU WON!</h1>
                    </c:when>
                    <c:when test="#{auth.loggedInAs != board.winner}">
                        <h1>YOU LOST!</h1>
                    </c:when>
                </c:choose>
                <table id="resultTable">
                    <tr><th>#{board.owner}</th><th>#{board.opponent}</th></tr>
                    <tr>
                        <td style="vertical-align: top;">
                            <table>
                                <c:forEach var="word" items="#{board.ownerWordsScores}">
                                    <tr>
                                        <td>
                                            #{word}
                                        </td>
                                    </tr>    
                                </c:forEach>
                            </table>
                        </td>
                        <td style="vertical-align: top;">
                            <table>
                                <c:forEach var="word" items="#{board.opponentWordsScores}">
                                    <tr>
                                        <td>
                                            #{word}
                                        </td>
                                    </tr>    
                                </c:forEach>
                            </table>
                        </td>
                    </tr>
                    <tr style="text-align: center;"><td style="border-top: 1px dotted #FF9A00;">#{board.ownerPoints}</td><td style="border-top: 1px dotted #FF9A00;">#{board.opponentPoints}</td></tr>
                </table>
                <center>
                    <h:form>
                        <h:commandButton style="margin-bottom: 20px;" styleClass="webaNovareBtn" action="#{board.endGame()}" value="End game" />
                    </h:form>
                </center>
            </div>
                <div id="allWords" align="center">
                    <h1 style="border-bottom: 1px dotted #FF9A00;">All Words</h1>
                    <table style="text-align: center;">
                    <c:forEach var="word" items="#{board.allWords}">
                        <tr>
                            <td>#{word}</td>
                        </tr>
                    </c:forEach>
                </table>
            </div>
            </div>
        </div>
        <div id="backgroundPopup"></div> 
        <div class="footerContainer">
            © Copyright 2012 Weba Novare, Gothenburg, Sweden
        </div>
    </h:body>
</html>
